{% import "macros/replacements.html" as replacements %}
<!DOCTYPE html>
<html lang="en-US">
<head>
	{%- block head -%}{%- endblock head -%}
	{%- set page = page | default(value = section | default(value = false)) -%}
	<meta charset="utf-8" />
	<title>Graphite | {{ title | safe }}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1" />
	{% if current_path -%}
	<meta property="og:url" content="https://graphite.rs{{ current_path | safe }}" />
	{%- endif %}
	{%- set meta_description = page.extra.meta_description | default(value = meta_description | default(value = false)) -%}
	{% if meta_description %}
	<meta name="description" content="{{ meta_description | safe }}" />
	<meta property="og:description" content="{{ meta_description | safe }}" />
	<meta name="twitter:description" content="{{ meta_description | safe }}" />
	{%- endif %}
	<meta property="og:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" />
	<meta name="twitter:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" />
	<meta property="og:title" content="{{ meta_title | default(value = title | safe) | safe }}" />
	<meta name="twitter:title" content="{{ meta_title | default(value = title | safe) | safe }}" />
	<meta property="og:type" content="{% if meta_article_type %}article{% else %}website{% endif %}" />
	<meta property="og:site_name" content="Graphite" />
	<meta name="twitter:site" content="@GraphiteEditor" />
	<meta name="twitter:card" content="summary_large_image" />
	{% block rss -%}
	<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) | safe }}" />
	{%- endblock %}
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

	{#- ON EVERY PAGE OF THE SITE: CSS AND JS TO LOAD EITHER AS A LINK OR INLINE -#}
	{#- ======================================================================== -#}
	{%- set global_linked_css = ["https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"] -%}
	{%- set global_linked_js = [] -%}
	{%- set global_css = ["/base.css"] -%}
	{%- set global_js = ["/js/text-justification.js", "/js/navbar.js"] -%}

	{#- RETRIEVE FROM TEMPLATES AND PAGES: CSS AND JS TO LOAD EITHER AS A LINK OR INLINE -#}
	{#- ================================================================================ -#}
	{%- set linked_css = page.extra.linked_css | default(value = []) | concat(with = linked_css | default(value = [])) -%}
	{%- set linked_js = page.extra.linked_js | default(value = []) | concat(with = linked_js | default(value = [])) -%}
	{%- set css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
	{%- set js = page.extra.js | default(value = []) | concat(with = js | default(value = [])) -%}

	{#- COMBINE THE GLOBAL AND TEMPLATE/PAGE RESOURCE LISTS -#}
	{#- =================================================== -#}
	{%- set linked_css_list = linked_css | concat(with = global_linked_css) -%}
	{%- set linked_js_list = linked_js | concat(with = global_linked_js) -%}
	{%- set css_list = css | concat(with = global_css) -%}
	{%- set js_list = js | concat(with = global_js) -%}

	{#- CONDITIONALLY MAKE ONLY PROD BUILDS ACTUALLY INLINE THE CSS AND JS FOR CLEANLINESS -#}
	{#- ================================================================================== -#}
	{%- if get_env(name = "MODE", default = "dev") != "prod" -%}
	{%- set linked_css_list = linked_css_list | concat(with = css_list) -%}
	{%- set linked_js_list = linked_js_list | concat(with = js_list) -%}
	{%- set css_list = [] -%}
	{%- set js_list = [] -%}
	{%- endif -%}
	
	{#- INSERT CSS LINKS -#}
	{#- ================ -#}
	{%- for path in linked_css_list %}
	<link rel="stylesheet" href="{{ path | safe }}" />
	{%- endfor %}

	{#- INSERT JS LINKS -#}
	{#- =============== -#}
	{%- for path in linked_js_list %}
	<script src="{{ path | safe }}"></script>
	{%- endfor %}

	{#- INSERT INLINE CSS CODE -#}
	{#- ====================== -#}
	{%- if css_list | length > 0 %}
	{{ "<" ~ "style>" | safe }}
	{% for path in css_list -%}
	{{ load_data(path = path) | safe }}
	{% endfor -%}
	{{ "</" ~ "style>" | safe }}
	{%- endif %}

	{#- INSERT INLINE JS CODE -#}
	{#- ===================== -#}
	{%- for path in js_list %}
	{{ "<" ~ "script>" | safe }}
	{{ load_data(path = path) | safe }}
	{{ "</" ~ "script>" | safe }}
	{%- endfor %}
	{{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") | safe }}
</head>
<body>
	<div class="page">
		<header>
			<nav>
				<div class="row">
					<div class="left">
						<a href="/">
							<img src="https://static.graphite.rs/logos/graphite-logo-solid.svg" alt="Graphite Logo" />
						</a>
					</div>
					<div class="right">
						<a href="/learn">Learn</a>
						<a href="/features">Features</a>
						<a href="/about">About</a>
						<a href="/blog">Blog</a>
						<a href="/volunteer">Volunteer</a>
						<a href="/donate">Donate</a>
						<a href="https://editor.graphite.rs" class="button arrow">Launch</a>
					</div>
				</div>
			</nav>
			<svg class="ripple" xmlns="http://www.w3.org/2000/svg">
				<path d="M 0,15 l 10000,0" />
			</svg>
			<hr />
		</header>
		<main>
			{%- filter replace(from = "<!-- replacements::blog_posts(count = 2) -->", to = replacements::blog_posts(count = 2)) -%}
			{%- block content -%}{%- endblock -%}
			{%- endfilter -%}
		</main>
		<footer>
			<hr />
			<nav>
				<a href="https://github.com/GraphiteEditor/Graphite" class="link not-uppercase">GitHub</a>
				<a href="/license" class="link not-uppercase">License</a>
				<a href="/logo" class="link not-uppercase">Logo</a>
				<a href="/press" class="link not-uppercase">Press</a>
				<a href="/contact" class="link not-uppercase">Contact</a>
			</nav>
			<span>Copyright &copy; {{ now() | date(format = "%Y") }} Graphite Labs, LLC</span>
		</footer>
	</div>
</body>
</html>
